<!doctype html>
<html lang="zh-CN">

<head>
    <title>我的账单</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/left-controll.css">
    <link rel="stylesheet" href="./css/right-top.css">
    <link rel="stylesheet" href="./css/bill.css">
    <style>
        .bill-list {
            border: none;
        }
        
        #bill-wrap {
            max-height: 535px;
        }
        
        #bill-wrap>div:nth-of-type(even) {
            background: #FAFAFA;
        }
    </style>
</head>

<body>
    <div id='app' v-cloak>

        <div class='dis-spa' style="align-items:flex-start;">

            <!-- 左边导航 -->
            <left-controll active='5'></left-controll>
            <!-- 左边导航 -->

            <!-- 右边类容 -->
            <div class='content-wrap-right' id='con-right'>

                <!-- 充值提现公告头部 -->
                <right-top></right-top>
                <!-- 充值提现公告头部 -->

                <div id='account-content' class='dis-cen'>
                    <div>
                        <div class='dis-spa my-bill-tit'>
                            <span>下注记录</span>
                            <div class='dis-spa'>
                                <!-- yes.png  是选择的图片 -->
                                <p class='dis-cen'><img src="./img/no.png" style="width:13px;height:13px;"><span>只看中奖</span></p>
                            </div>
                        </div>
                        <div>
                            <div id='bill-wrap'>
                                <div class='dis-spa bill-list'>
                                    <p class='dis-spa'>
                                        <span>20181220-096 [五星-直选复式] 26,0,3,9,13579 [5注] [3倍] [元模式] [30元]</span>
                                    </p>
                                    <div class='dis-spa'>
                                        <span style="color:#DF0024;">待开奖</span>
                                    </div>
                                </div>
                                <div class='dis-spa bill-list'>
                                    <p class='dis-spa'>
                                        <span>20181220-096 [五星-直选复式] 26,0,3,9,13579 [5注] [3倍] [元模式] [30元]</span>
                                    </p>
                                    <div class='dis-spa'>
                                        <span style="color:#999999;">待开奖</span>
                                    </div>
                                </div>
                                <div class='dis-spa bill-list' v-for="(val,index) in 35" :key='index'>
                                    <p class='dis-spa'>
                                        <span>20181220-096 [五星-直选复式] 26,0,3,9,13579 [5注] [3倍] [元模式] [30元]</span>
                                    </p>
                                    <div class='dis-spa'>
                                        <span>待开奖</span>
                                    </div>
                                </div>
                            </div>
                            <div class='dis-cen page'>
                                <span>-</span>
                                <span>首页</span>
                                <span class='page-active'>1</span>
                                <span>2</span>
                                <span>3</span>
                                <span>...</span>
                                <span>12</span>
                                <span>13</span>
                                <span>14</span>
                                <span>尾页</span>
                                <span>+</span>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 右边类容 -->
            </div>
        </div>
        <script src="./js/vue.min.js"></script>
        <script src="./component/left-controll.js"></script>
        <script src="./component/right-top.js"></script>
        <script src="./js/el/index.js"></script>
        <script src='./js/jquery.min.js'></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {

                },
                methods: {}
            });
        </script>

</body>

</html>